<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">	
	<link rel="stylesheet" href="css/swiper.min.css">
	<style>
		html,body{
            position:relative;
            height:100%;
        }
		body{
            margin:0;
            padding:0;
        }
        .swiper-container{
        	width: 100%;
        	height: 100%;
        	margin-left: auto;
        	margin-right: auto;
        }
        .swiper-slide{
			text-align: center;
			background-color: #ccc;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>
<body>
	<!-- rtl从右到左 反向轮播图 -->
	<div class="swiper-container" dir="rtl">
		<div class="swiper-wrapper">
			<div class="swiper-slide" data-hash="slide1">第1页
				<a href="#slide3" target="_blank">快速跳转到第3页</a>&nbsp;&nbsp;
				<a href="#slide4" target="_blank">快速跳转到第4页</a>&nbsp;&nbsp;
				<a href="#slide5" target="_blank">快速跳转到第5页</a>&nbsp;&nbsp;
			</div>
			<div class="swiper-slide" data-hash="slide2">第2页</div>
			<div class="swiper-slide" data-hash="slide3">第3页</div>
			<div class="swiper-slide" data-hash="slide4">第4页</div>
			<div class="swiper-slide" data-hash="slide5">第5页</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>

	<script src="js/swiper.min.js"></script>
	<script>
		var swiper=new Swiper(".swiper-container",{
			pagination:".swiper-pagination", 
			paginationClickable:true,
			spaceBetween:30, 
			nextButton:".swiper-button-next",
			prevButton:".swiper-button-prev",
			grabCursor:true,

			/*
				散列导航，类似于锚链接，可以快速跳转到指定的slide，无需等待前面slide的切换
				1.在每个slide处增加data-hash属性，相当于设置id
				2.在链接处引用
				注：必须设置超链接的target="_blank"
			*/
			hashnav:true, //启用散列导航

		});
	</script>	
</body>
</html>